/**
 * Created by Administrator on 2018/5/6/006.
 */
//思路
//如果是前后端分离的话，首先利用ajax请求后台数据，然后进行布局
//1.实现瀑布流的话，首先是几列，每列宽度固定，高度不固定
//2.主要是利用css的绝对定位。
//3.第一列排列完成之后，从第二列开始的时候找高度最低的那个列，然后排列进去

jQuery.fn.waterfall =function(){
    //假设布局为5列
    var column =5;
    //设置间隙
    var gap =10;
    //设置一个数组，然后放入每一行的高度
    var rows_height =[];
    //首选获取所有的子元素，然后绝对定位
    var items = $(this).children();
    $(this).css({
        'position':'relative',
        'left':gap/2
    });


    var p_width = $(this).width();
    //获得每一列的宽度
    var c_width =p_width / column;
    //设置宽度
    items.width(c_width-gap);

    items.each(function(key,value){

        //第一列，top:0，left是列数乘以宽度
        if(key <column){
           $(this).css({
               'position':"absolute",
               'top':0,
               'left':key*c_width,
           });
            rows_height.push($(this).height());

        }else{
            //定义两个变量用来记录当前最小的那一列的值和那一列对应的index
            var min_val =rows_height[0];
            var min_key =0;
            for(var i=0;i<rows_height.length;i++){
                if(min_val>rows_height[i]){
                    min_val = rows_height[i];
                    min_key =i;
                }
            };
            //实时更新最小高度，始终保持数组中只有5个值，持续比较
             rows_height[min_key] +=$(this).height()+10;
            $(this).css({
                'position':'absolute',
                'left':c_width*min_key,
                'top':min_val+10
            })
        }

    });
    //添加鼠标hover事件
    items.hover(
        function () {
            //$(this).find('.layer').css({'width':$(this).width() + 20,'height':$(this).height() + 20});
            $(this).css({'border':'1px solid #CCCCCC','background':'#FFFFFF'});
        },
        function () {
            //$(this).find('.layer').css({'width':'','height':''});
            $(this).css({'border':'','background':''});
        }
    );
    //定义一个最大的变量用于给父级设置高度
    var max_height = rows_height[0];

    for(var j =0;j<rows_height.length;j++){
        if(max_height<rows_height[j]){
            max_height = rows_height[j];
        }
    }
    //给父级设置高度
    $(this).height(max_height);
};